<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="generator" content="JsDoc Toolkit" />
		
		<title>JsDoc Reference - pv.Layout.Stack</title>

		<style type="text/css">
			/* default.css */
body
{
	font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
	width: 800px;
}

.header
{
	clear: both;
	background-color: #ccc;
	padding: 8px;
}

h1
{
	font-size: 150%;
	font-weight: bold;
	padding: 0;
	margin: 1em 0 0 .3em;
}

hr
{
	border: none 0;
	border-top: 1px solid #7F8FB1;
	height: 1px;
}

pre.code
{
	display: block;
	padding: 8px;
	border: 1px dashed #ccc;
}

#index
{
	margin-top: 24px;
	float: left;
	width: 160px;
	position: absolute;
	left: 8px;
	background-color: #F3F3F3;
	padding: 8px;
}

#content
{
	margin-left: 190px;
	width: 600px;
}

.classList
{
	list-style-type: none;
	padding: 0;
	margin: 0 0 0 8px;
	font-family: arial, sans-serif;
	font-size: 1em;
	overflow: auto;
}

.classList li
{
	padding: 0;
	margin: 0 0 8px 0;
}

.summaryTable { width: 100%; }

h1.classTitle
{
	font-size:170%;
	line-height:130%;
}

h2 { font-size: 110%; }
caption, div.sectionTitle
{
	background-color: #7F8FB1;
	color: #fff;
	font-size:130%;
	text-align: left;
	padding: 2px 6px 2px 6px;
	border: 1px #7F8FB1 solid;
}

div.sectionTitle { margin-bottom: 8px; }
.summaryTable thead { display: none; }

.summaryTable td
{
	vertical-align: top;
	padding: 4px;
	border-bottom: 1px #7F8FB1 solid;
	border-right: 1px #7F8FB1 solid;
}

/*col#summaryAttributes {}*/
.summaryTable td.attributes
{
	border-left: 1px #7F8FB1 solid;
	width: 140px;
	text-align: right;
}

td.attributes, .fixedFont
{
	line-height: 15px;
	color: #002EBE;
	font-family: "Courier New",Courier,monospace;
	font-size: 13px;
}

.summaryTable td.nameDescription
{
	text-align: left;
	font-size: 13px;
	line-height: 15px;
}

.summaryTable td.nameDescription, .description
{
	line-height: 15px;
	padding: 4px;
	padding-left: 4px;
}

.summaryTable { margin-bottom: 8px; }

ul.inheritsList
{
	list-style: square;
	margin-left: 20px;
	padding-left: 0;
}

.detailList {
	margin-left: 20px; 
	line-height: 15px;
}
.detailList dt { margin-left: 20px; }

.detailList .heading
{
	font-weight: bold;
	padding-bottom: 6px;
	margin-left: 0;
}

.light, td.attributes, .light a:link, .light a:visited
{
	color: #777;
	font-style: italic;
}

.fineprint
{
	text-align: right;
	font-size: 10px;
}
		</style>
	</head>

	<body>
<!-- ============================== header ================================= -->	
		<!-- begin static/header.html -->
		<div id="header">
</div>
		<!-- end static/header.html -->

<!-- ============================== classes index ============================ -->
		<div id="index">
			<!-- begin publish.classesIndex -->
			<div align="center"><a href="../index.html">Class Index</a>
| <a href="../files.html">File Index</a></div>
<hr />
<h2>Classes</h2>
<ul class="classList">
	
	<li><i><a href="../symbols/_global_.html">_global_</a></i></li>
	
	<li><a href="../symbols/Array.html">Array</a></li>
	
	<li><a href="../symbols/pv.html">pv</a></li>
	
	<li><a href="../symbols/pv.Anchor.html">pv.Anchor</a></li>
	
	<li><a href="../symbols/pv.Area.html">pv.Area</a></li>
	
	<li><a href="../symbols/pv.Bar.html">pv.Bar</a></li>
	
	<li><a href="../symbols/pv.Behavior.html">pv.Behavior</a></li>
	
	<li><a href="../symbols/pv.Behavior.drag.html">pv.Behavior.drag</a></li>
	
	<li><a href="../symbols/pv.Behavior.pan.html">pv.Behavior.pan</a></li>
	
	<li><a href="../symbols/pv.Behavior.point.html">pv.Behavior.point</a></li>
	
	<li><a href="../symbols/pv.Behavior.resize.html">pv.Behavior.resize</a></li>
	
	<li><a href="../symbols/pv.Behavior.select.html">pv.Behavior.select</a></li>
	
	<li><a href="../symbols/pv.Behavior.zoom.html">pv.Behavior.zoom</a></li>
	
	<li><a href="../symbols/pv.Color.html">pv.Color</a></li>
	
	<li><a href="../symbols/pv.Color.Hsl.html">pv.Color.Hsl</a></li>
	
	<li><a href="../symbols/pv.Color.Rgb.html">pv.Color.Rgb</a></li>
	
	<li><a href="../symbols/pv.Colors.html">pv.Colors</a></li>
	
	<li><a href="../symbols/pv.Constraint.html">pv.Constraint</a></li>
	
	<li><a href="../symbols/pv.Constraint.bound.html">pv.Constraint.bound</a></li>
	
	<li><a href="../symbols/pv.Constraint.collision.html">pv.Constraint.collision</a></li>
	
	<li><a href="../symbols/pv.Constraint.position.html">pv.Constraint.position</a></li>
	
	<li><a href="../symbols/pv.Dom.html">pv.Dom</a></li>
	
	<li><a href="../symbols/pv.Dom.Node.html">pv.Dom.Node</a></li>
	
	<li><a href="../symbols/pv.Dot.html">pv.Dot</a></li>
	
	<li><a href="../symbols/pv.Flatten.html">pv.Flatten</a></li>
	
	<li><a href="../symbols/pv.Force.html">pv.Force</a></li>
	
	<li><a href="../symbols/pv.Force.charge.html">pv.Force.charge</a></li>
	
	<li><a href="../symbols/pv.Force.drag.html">pv.Force.drag</a></li>
	
	<li><a href="../symbols/pv.Force.spring.html">pv.Force.spring</a></li>
	
	<li><a href="../symbols/pv.Format.html">pv.Format</a></li>
	
	<li><a href="../symbols/pv.Format.date.html">pv.Format.date</a></li>
	
	<li><a href="../symbols/pv.Format.number.html">pv.Format.number</a></li>
	
	<li><a href="../symbols/pv.Format.time.html">pv.Format.time</a></li>
	
	<li><a href="../symbols/pv.Geo.LatLng.html">pv.Geo.LatLng</a></li>
	
	<li><a href="../symbols/pv.Geo.Projection.html">pv.Geo.Projection</a></li>
	
	<li><a href="../symbols/pv.Geo.projections.html">pv.Geo.projections</a></li>
	
	<li><a href="../symbols/pv.Geo.scale.html">pv.Geo.scale</a></li>
	
	<li><a href="../symbols/pv.Geo.scale%23ticks.html">pv.Geo.scale#ticks</a></li>
	
	<li><a href="../symbols/pv.histogram.html">pv.histogram</a></li>
	
	<li><a href="../symbols/pv.histogram.Bin.html">pv.histogram.Bin</a></li>
	
	<li><a href="../symbols/pv.Image.html">pv.Image</a></li>
	
	<li><a href="../symbols/pv.Label.html">pv.Label</a></li>
	
	<li><a href="../symbols/pv.Layout.html">pv.Layout</a></li>
	
	<li><a href="../symbols/pv.Layout.Arc.html">pv.Layout.Arc</a></li>
	
	<li><a href="../symbols/pv.Layout.Bullet.html">pv.Layout.Bullet</a></li>
	
	<li><a href="../symbols/pv.Layout.Cluster.html">pv.Layout.Cluster</a></li>
	
	<li><a href="../symbols/pv.Layout.Cluster.Fill.html">pv.Layout.Cluster.Fill</a></li>
	
	<li><a href="../symbols/pv.Layout.Force.html">pv.Layout.Force</a></li>
	
	<li><a href="../symbols/pv.Layout.Grid.html">pv.Layout.Grid</a></li>
	
	<li><a href="../symbols/pv.Layout.Hierarchy.html">pv.Layout.Hierarchy</a></li>
	
	<li><a href="../symbols/pv.Layout.Horizon.html">pv.Layout.Horizon</a></li>
	
	<li><a href="../symbols/pv.Layout.Indent.html">pv.Layout.Indent</a></li>
	
	<li><a href="../symbols/pv.Layout.Matrix.html">pv.Layout.Matrix</a></li>
	
	<li><a href="../symbols/pv.Layout.Network.html">pv.Layout.Network</a></li>
	
	<li><a href="../symbols/pv.Layout.Network.Link.html">pv.Layout.Network.Link</a></li>
	
	<li><a href="../symbols/pv.Layout.Network.Node.html">pv.Layout.Network.Node</a></li>
	
	<li><a href="../symbols/pv.Layout.Pack.html">pv.Layout.Pack</a></li>
	
	<li><a href="../symbols/pv.Layout.Partition.html">pv.Layout.Partition</a></li>
	
	<li><a href="../symbols/pv.Layout.Partition.Fill.html">pv.Layout.Partition.Fill</a></li>
	
	<li><a href="../symbols/pv.Layout.Rollup.html">pv.Layout.Rollup</a></li>
	
	<li><a href="../symbols/pv.Layout.Stack.html">pv.Layout.Stack</a></li>
	
	<li><a href="../symbols/pv.Layout.Tree.html">pv.Layout.Tree</a></li>
	
	<li><a href="../symbols/pv.Layout.Treemap.html">pv.Layout.Treemap</a></li>
	
	<li><a href="../symbols/pv.Line.html">pv.Line</a></li>
	
	<li><a href="../symbols/pv.Mark.html">pv.Mark</a></li>
	
	<li><a href="../symbols/pv.Nest.html">pv.Nest</a></li>
	
	<li><a href="../symbols/pv.Panel.html">pv.Panel</a></li>
	
	<li><a href="../symbols/pv.Particle.html">pv.Particle</a></li>
	
	<li><a href="../symbols/pv.Quadtree.html">pv.Quadtree</a></li>
	
	<li><a href="../symbols/pv.Quadtree.Node.html">pv.Quadtree.Node</a></li>
	
	<li><a href="../symbols/pv.Rule.html">pv.Rule</a></li>
	
	<li><a href="../symbols/pv.Scale.html">pv.Scale</a></li>
	
	<li><a href="../symbols/pv.Scale.linear.html">pv.Scale.linear</a></li>
	
	<li><a href="../symbols/pv.Scale.log.html">pv.Scale.log</a></li>
	
	<li><a href="../symbols/pv.Scale.ordinal.html">pv.Scale.ordinal</a></li>
	
	<li><a href="../symbols/pv.Scale.quantile.html">pv.Scale.quantile</a></li>
	
	<li><a href="../symbols/pv.Scale.quantitative.html">pv.Scale.quantitative</a></li>
	
	<li><a href="../symbols/pv.Scale.root.html">pv.Scale.root</a></li>
	
	<li><a href="../symbols/pv.Simulation.html">pv.Simulation</a></li>
	
	<li><a href="../symbols/pv.Transform.html">pv.Transform</a></li>
	
	<li><a href="../symbols/pv.Tree.html">pv.Tree</a></li>
	
	<li><a href="../symbols/pv.Vector.html">pv.Vector</a></li>
	
	<li><a href="../symbols/pv.version.html">pv.version</a></li>
	
	<li><a href="../symbols/pv.Wedge.html">pv.Wedge</a></li>
	
</ul>
<hr />
			<!-- end publish.classesIndex -->
		</div>
		
		<div id="content">
<!-- ============================== class title ============================ -->
			<h1 class="classTitle">
				
				Class pv.Layout.Stack
			</h1>

<!-- ============================== class summary ========================== -->			
			<p class="description">
				
				<br />Extends
					<a href="../symbols/pv.Layout.html">pv.Layout</a>.<br />
				
			
				Implements a layout for stacked visualizations, ranging from simple
stacked bar charts to more elaborate "streamgraphs" composed of stacked
areas. Stack layouts uses length as a visual encoding, as opposed to
position, as the layers do not share an aligned axis.

<p>Marks can be stacked vertically or horizontally. For example,

<pre>vis.add(pv.Layout.Stack)
    .layers([[1, 1.2, 1.7, 1.5, 1.7],
             [.5, 1, .8, 1.1, 1.3],
             [.2, .5, .8, .9, 1]])
    .x(function() this.index * 35)
    .y(function(d) d * 40)
  .layer.add(pv.Area);</pre>

specifies a vertically-stacked area chart, using the default "bottom-left"
orientation with "zero" offset. This visualization can be easily changed into
a streamgraph using the "wiggle" offset, which attempts to minimize change in
slope weighted by layer thickness. See the <a href="#offset">#offset</a> property for more
supported streamgraph algorithms.

<p>In the simplest case, the layer data can be specified as a two-dimensional
array of numbers. The <tt>x</tt> and <tt>y</tt> psuedo-properties are used to
define the thickness of each layer at the given position, respectively; in
the above example of the "bottom-left" orientation, the <tt>x</tt> and
<tt>y</tt> psuedo-properties are equivalent to the <tt>left</tt> and
<tt>height</tt> properties that you might use if you implemented a stacked
area by hand.

<p>The advantage of using the stack layout is that the baseline, i.e., the
<tt>bottom</tt> property is computed automatically using the specified offset
algorithm. In addition, the order of layers can be computed using a built-in
algorithm via the <tt>order</tt> property.

<p>With the exception of the "expand" <tt>offset</tt>, the stack layout does
not perform any automatic scaling of data; the values returned from
<tt>x</tt> and <tt>y</tt> specify pixel sizes. To simplify scaling math, use
this layout in conjunction with <a href="../symbols/pv.Scale.linear.html">pv.Scale.linear</a> or similar.

<p>In other cases, the <tt>values</tt> psuedo-property can be used to define
the data more flexibly. As with a typical panel &amp; area, the
<tt>layers</tt> property corresponds to the data in the enclosing panel,
while the <tt>values</tt> psuedo-property corresponds to the data for the
area within the panel. For example, given an array of data values:

<pre>var crimea = [
 { date: "4/1854", wounds: 0, other: 110, disease: 110 },
 { date: "5/1854", wounds: 0, other: 95, disease: 105 },
 { date: "6/1854", wounds: 0, other: 40, disease: 95 },
 ...</pre>

and a corresponding array of series names:

<pre>var causes = ["wounds", "other", "disease"];</pre>

Separate layers can be defined for each cause like so:

<pre>vis.add(pv.Layout.Stack)
    .layers(causes)
    .values(crimea)
    .x(function(d) x(d.date))
    .y(function(d, p) y(d[p]))
  .layer.add(pv.Area)
    ...</pre>

As with the panel &amp; area case, the datum that is passed to the
psuedo-properties <tt>x</tt> and <tt>y</tt> are the values (an element in
<tt>crimea</tt>); the second argument is the layer data (a string in
<tt>causes</tt>). Additional arguments specify the data of enclosing panels,
if any.
				
				
					<br /><i>Defined in: </i> <a href="../symbols/src/src_layout_Stack.js.html">Stack.js</a>.
				
			</p>

<!-- ============================== constructor summary ==================== -->			
			
			<table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class pv.Layout.Stack.">
				<caption>Class Summary</caption>
				<thead>
					<tr>
						<th scope="col">Constructor Attributes</th>
						<th scope="col">Constructor Name and Description</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="attributes">&nbsp;</td>
						<td class="nameDescription" >
							<div class="fixedFont">
								<b><a href="../symbols/pv.Layout.Stack.html#constructor">pv.Layout.Stack</a></b>()
							</div>
							<div class="description">Constructs a new, empty stack layout.</div>
						</td>
					</tr>
				</tbody>
			</table>
			

<!-- ============================== properties summary ===================== -->
			
				
				
				<table class="summaryTable" cellspacing="0" summary="A summary of the fields documented in the class pv.Layout.Stack.">
					<caption>Field Summary</caption>
					<thead>
						<tr>
							<th scope="col">Field Attributes</th>
							<th scope="col">Field Name and Description</th>
						</tr>
					</thead>
					<tbody>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Layout.Stack.html#defaults">defaults</a></b>
								</div>
								<div class="description">Default properties for stack layouts.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Layout.Stack.html#layer">layer</a></b>
								</div>
								<div class="description">The layer prototype.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Layout.Stack.html#layers">layers</a></b>
								</div>
								<div class="description">The layer data in row-major order.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Layout.Stack.html#offset">offset</a></b>
								</div>
								<div class="description">The layer offset; the y-position of the bottom of the lowest layer.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Layout.Stack.html#order">order</a></b>
								</div>
								<div class="description">The layer order.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Layout.Stack.html#orient">orient</a></b>
								</div>
								<div class="description">The layer orientation.</div>
							</td>
						</tr>
					
					</tbody>
				</table>
				
				
				
				<dl class="inheritsList">
				<dt>Fields borrowed from class <a href="../symbols/pv.Panel.html">pv.Panel</a>: </dt><dd><a href="../symbols/pv.Panel.html#canvas">canvas</a>, <a href="../symbols/pv.Panel.html#children">children</a>, <a href="../symbols/pv.Panel.html#overflow">overflow</a>, <a href="../symbols/pv.Panel.html#transform">transform</a></dd><dt>Fields borrowed from class <a href="../symbols/pv.Bar.html">pv.Bar</a>: </dt><dd><a href="../symbols/pv.Bar.html#fillStyle">fillStyle</a>, <a href="../symbols/pv.Bar.html#height">height</a>, <a href="../symbols/pv.Bar.html#lineWidth">lineWidth</a>, <a href="../symbols/pv.Bar.html#strokeStyle">strokeStyle</a>, <a href="../symbols/pv.Bar.html#width">width</a></dd><dt>Fields borrowed from class <a href="../symbols/pv.Mark.html">pv.Mark</a>: </dt><dd><a href="../symbols/pv.Mark.html#bottom">bottom</a>, <a href="../symbols/pv.Mark.html#childIndex">childIndex</a>, <a href="../symbols/pv.Mark.html#cursor">cursor</a>, <a href="../symbols/pv.Mark.html#data">data</a>, <a href="../symbols/pv.Mark.html#events">events</a>, <a href="../symbols/pv.Mark.html#index">index</a>, <a href="../symbols/pv.Mark.html#left">left</a>, <a href="../symbols/pv.Mark.html#parent">parent</a>, <a href="../symbols/pv.Mark.html#proto">proto</a>, <a href="../symbols/pv.Mark.html#reverse">reverse</a>, <a href="../symbols/pv.Mark.html#right">right</a>, <a href="../symbols/pv.Mark.html#root">root</a>, <a href="../symbols/pv.Mark.html#scale">scale</a>, <a href="../symbols/pv.Mark.html#title">title</a>, <a href="../symbols/pv.Mark.html#top">top</a>, <a href="../symbols/pv.Mark.html#type">type</a>, <a href="../symbols/pv.Mark.html#visible">visible</a></dd>
				</dl>
				
			

<!-- ============================== methods summary ======================== -->
			
				
				
				<table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class pv.Layout.Stack.">
					<caption>Method Summary</caption>
					<thead>
						<tr>
							<th scope="col">Method Attributes</th>
							<th scope="col">Method Name and Description</th>
						</tr>
					</thead>
					<tbody>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/pv.Layout.Stack.html#values">values</a></b>(f)
								</div>
								<div class="description">The values function; determines the values for a given layer.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/pv.Layout.Stack.html#x">x</a></b>(f)
								</div>
								<div class="description">The x psuedo-property; determines the position of the value within the layer.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/pv.Layout.Stack.html#y">y</a></b>(f)
								</div>
								<div class="description">The y psuedo-property; determines the thickness of the layer at the given
value.</div>
							</td>
						</tr>
					
					</tbody>
				</table>
				
				
				
				<dl class="inheritsList">
				<dt>Methods borrowed from class <a href="../symbols/pv.Panel.html">pv.Panel</a>: </dt><dd><a href="../symbols/pv.Panel.html#add">add</a>, <a href="../symbols/pv.Panel.html#anchor">anchor</a></dd><dt>Methods borrowed from class <a href="../symbols/pv.Mark.html">pv.Mark</a>: </dt><dd><a href="../symbols/pv.Mark.html#anchorTarget">anchorTarget</a>, <a href="../symbols/pv.Mark.html#def">def</a>, <a href="../symbols/pv.Mark.html#event">event</a>, <a href="../symbols/pv.Mark.html#extend">extend</a>, <a href="../symbols/pv.Mark.html#margin">margin</a>, <a href="../symbols/pv.Mark.html#mouse">mouse</a>, <a href="../symbols/pv.Mark.html#render">render</a></dd>
				</dl>
				
			
<!-- ============================== events summary ======================== -->
			

<!-- ============================== constructor details ==================== -->		
			
			<div class="details"><a name="constructor"> </a>
				<div class="sectionTitle">
					Class Detail
				</div>
				
				<div class="fixedFont">
						<b>pv.Layout.Stack</b>()
				</div>
				
				<div class="description">
					Constructs a new, empty stack layout. Layouts are not typically constructed
directly; instead, they are added to an existing panel via
<a href="../symbols/pv.Mark.html#add">pv.Mark#add</a>.
					
				</div>
				
				
				
				
					
					
					
					
					
					
					

			</div>
			

<!-- ============================== field details ========================== -->		
			
				<div class="sectionTitle">
					Field Detail
				</div>
				
					<a name="defaults"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Layout.Stack.html">pv.Layout.Stack</a>}</span>
					<b>defaults</b>
					
					</div>
					<div class="description">
						Default properties for stack layouts. The default orientation is
"bottom-left", the default offset is "zero", and the default layers is
<tt>[[]]</tt>.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="layer"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span>
					<b>layer</b>
					
					</div>
					<div class="description">
						The layer prototype. This prototype is intended to be used with an area,
bar or panel mark (or subclass thereof). Other mark types may be possible,
though note that the stack layout is not currently designed to support
radial stacked visualizations using wedges.

<p>The layer is not a direct child of the stack layout; a hidden panel is
used to replicate layers.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="layers"> </a>
					<div class="fixedFont">
					
					<span class="light">{array[]}</span>
					<b>layers</b>
					
					</div>
					<div class="description">
						The layer data in row-major order. The value of this property is typically a
two-dimensional (i.e., nested) array, but any array can be used, provided the
values psuedo-property is defined accordingly.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="offset"> </a>
					<div class="fixedFont">
					
					<span class="light">{string}</span>
					<b>offset</b>
					
					</div>
					<div class="description">
						The layer offset; the y-position of the bottom of the lowest layer. The
following values are supported:<ul>

<li>zero - use a zero baseline, i.e., the y-axis.
<li>silohouette - center the stream, i.e., ThemeRiver.
<li>wiggle - minimize weighted change in slope.
<li>expand - expand layers to fill the enclosing layout dimensions.

</ul>For details on these offset algorithms, refer to "Stacked Graphs --
Geometry &amp; Aesthetics" by L. Byron and M. Wattenberg, IEEE TVCG
November/December 2008.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="order"> </a>
					<div class="fixedFont">
					
					<span class="light">{string}</span>
					<b>order</b>
					
					</div>
					<div class="description">
						The layer order. The following values are supported:<ul>

<li><i>null</i> - use given layer order.
<li>inside-out - sort by maximum value, with balanced order.
<li>reverse - use reverse of given layer order.

</ul>For details on the inside-out order algorithm, refer to "Stacked Graphs
-- Geometry &amp; Aesthetics" by L. Byron and M. Wattenberg, IEEE TVCG
November/December 2008.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="orient"> </a>
					<div class="fixedFont">
					
					<span class="light">{string}</span>
					<b>orient</b>
					
					</div>
					<div class="description">
						The layer orientation. The following values are supported:<ul>

<li>bottom-left == bottom
<li>bottom-right
<li>top-left == top
<li>top-right
<li>left-top
<li>left-bottom == left
<li>right-top
<li>right-bottom == right

</ul>. The default value is "bottom-left", which means that the layers will
be built from the bottom-up, and the values within layers will be laid out
from left-to-right.

<p>Note that with non-zero baselines, some orientations may give similar
results. For example, offset("silohouette") centers the layers, resulting in
a streamgraph. Thus, the orientations "bottom-left" and "top-left" will
produce similar results, differing only in the layer order.
						
						
					</div>
					
					

						
						
						
						

					
				
			

<!-- ============================== method details ========================= -->		
			
				<div class="sectionTitle">
					Method Detail
				</div>
				
					<a name="values"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Layout.Stack.html">pv.Layout.Stack</a>}</span>
					<b>values</b>(f)
					
					</div>
					<div class="description">
						The values function; determines the values for a given layer. The default
value is the identity function, which assumes that the layers property is
specified as a two-dimensional (i.e., nested) array.
						
						
					</div>
					
					
					
						
							<dl class="detailList">
							<dt class="heading">Parameters:</dt>
							
								<dt>
									<span class="light fixedFont">{function}</span> <b>f</b>
									
								</dt>
								<dd>the values function.</dd>
							
							</dl>
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd><span class="light fixedFont">{<a href="../symbols/pv.Layout.Stack.html">pv.Layout.Stack</a>}</span> this.</dd>
							
							</dl>
						
						
						

					<hr />
				
					<a name="x"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Layout.Stack.html">pv.Layout.Stack</a>}</span>
					<b>x</b>(f)
					
					</div>
					<div class="description">
						The x psuedo-property; determines the position of the value within the layer.
This typically corresponds to the independent variable. For example, with the
default "bottom-left" orientation, this function defines the "left" property.
						
						
					</div>
					
					
					
						
							<dl class="detailList">
							<dt class="heading">Parameters:</dt>
							
								<dt>
									<span class="light fixedFont">{function}</span> <b>f</b>
									
								</dt>
								<dd>the x function.</dd>
							
							</dl>
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd><span class="light fixedFont">{<a href="../symbols/pv.Layout.Stack.html">pv.Layout.Stack</a>}</span> this.</dd>
							
							</dl>
						
						
						

					<hr />
				
					<a name="y"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Layout.Stack.html">pv.Layout.Stack</a>}</span>
					<b>y</b>(f)
					
					</div>
					<div class="description">
						The y psuedo-property; determines the thickness of the layer at the given
value.  This typically corresponds to the dependent variable. For example,
with the default "bottom-left" orientation, this function defines the
"height" property.
						
						
					</div>
					
					
					
						
							<dl class="detailList">
							<dt class="heading">Parameters:</dt>
							
								<dt>
									<span class="light fixedFont">{function}</span> <b>f</b>
									
								</dt>
								<dd>the y function.</dd>
							
							</dl>
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd><span class="light fixedFont">{<a href="../symbols/pv.Layout.Stack.html">pv.Layout.Stack</a>}</span> this.</dd>
							
							</dl>
						
						
						

					
				
			
			
<!-- ============================== event details ========================= -->		
			
			
			<hr />
		</div>

		
<!-- ============================== footer ================================= -->
		<div class="fineprint" style="clear:both">
			
			Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.3.2 on Fri May 28 2010 10:13:29 GMT-0700 (PDT)
		</div>
	</body>
</html>
